@fortawesome/fontawesome-svg-core

What is @fortawesome/fontawesome-svg-core?

The @fortawesome/fontawesome-svg-core package is part of the Font Awesome system, which provides scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. This package is the core of Font Awesome and includes the necessary tools to define and use icons in a project.

What are @fortawesome/fontawesome-svg-core's main functionalities?

Adding Icons

This code sample demonstrates how to add an icon to the library so it can be used throughout your application.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

library.add(faCoffee);

Using Icons in React

This code sample shows how to use an icon in a React component with the FontAwesomeIcon component.

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const IconComponent = () => (
  <div>
    <FontAwesomeIcon icon='coffee' />
  </div>
);

Customizing Icons

This code sample illustrates how to customize an icon's size and color.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

<FontAwesomeIcon icon={faCoffee} size='2x' color='blue' />

Layering and Text

This code sample shows how to layer icons and use text with icons.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCircle, faCheckCircle } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

library.add(faCircle, faCheckCircle);

<FontAwesomeIcon icon={['far', 'circle']} />
<FontAwesomeIcon icon={['far', 'check-circle']} />

Other packages similar to @fortawesome/fontawesome-svg-core

react-icons

React-icons includes a collection of icon sets including Font Awesome, Material Design, and more. It allows the use of icons as React components, similar to @fortawesome/fontawesome-svg-core but with a wider range of icon sets.

ionicons

Ionicons is an open-sourced and MIT licensed icon pack. While @fortawesome/fontawesome-svg-core is part of a larger system with a focus on Font Awesome icons, Ionicons offers a different set of icons and is commonly used in Ionic projects.

README

@fortawesome/fontawesome-svg-core - SVG with JavaScript version

"I came here to chew bubblegum and install Font Awesome 6 - and I'm all out of bubblegum"

Installation

$ npm i --save @fortawesome/fontawesome-svg-core

Or

$ yarn add @fortawesome/fontawesome-svg-core

Documentation

Get started here. Continue your journey here.

Or go straight to the API documentation.

Issues and support

Start with GitHub issues and ping us on Twitter if you need to.